<template>
  <div id="mainContent">
    <div>
      <el-carousel height="500px">
        <el-carousel-item v-for="(item,i) in titleCarousel" :key="i">
          <img style="border-radius: 10px" width="100%" :src="item" alt=""/>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="display: flex;justify-content: space-between;margin-top: 25px">
      <div id="mainMain" style="width: 71%">

        <!--        卡片轮播图-->
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span><b>正版特惠</b> <span style="font-size: 15px">果核谈下来的优惠正版价查看更多</span></span>
          </div>
          <el-carousel height="300px" trigger="click">
            <el-carousel-item v-for="(item,i) in carousel" :key="i">
              <div style="display: flex;justify-content: space-around;height: 100%">
                <el-card class="carouselCard" style="height: 248px;width: 240px;padding: 10px" shadow="hover">
                  <div class="item text">
                    <img style="border-radius: 10px" width="232px" height="146px" :src="item[0]" alt=""/>
                    <!--                  文字-->
                    <div style="font-size: 20px;padding: 5px">
                      <em><b>正版特惠</b></em> Adobe2021全家桶...
                    </div>
                    <!--                  收藏评价-->
                    <div
                      style="font-size: 12px;line-height:12px;text-align:center;display: flex;justify-content: space-between;">
                      <p> 2020年12月10日</p>
                      <span style="display: flex;justify-content: space-around;align-items: center;">
                      <span style="padding-right: 5px"><img height="12px" src="../../assets/icon/眼睛.png"
                                                            alt="">81.5k </span>
                      <span><img height="12px" src="../../assets/icon/评论.png" alt="">48</span>
                    </span>
                    </div>
                  </div>
                </el-card>
                <el-card class="carouselCard" style="height: 248px;width: 240px;padding: 10px" shadow="hover">
                  <div class="item text">
                    <img style="border-radius: 10px" width="232px" height="146px" :src="item[1]" alt=""/>
                    <!--                  文字-->
                    <div style="font-size: 20px;padding: 5px">
                      <em><b>正版特惠</b></em> Adobe2021全家桶...
                    </div>
                    <!--                  收藏评价-->
                    <div
                      style="font-size: 12px;line-height:12px;text-align:center;display: flex;justify-content: space-between;">
                      <p> 2020年12月10日</p>
                      <span style="display: flex;justify-content: space-around;align-items: center;">
                      <span style="padding-right: 5px"><img height="12px" src="../../assets/icon/眼睛.png"
                                                            alt="">81.5k </span>
                      <span><img height="12px" src="../../assets/icon/评论.png" alt="">48</span>
                    </span>
                    </div>
                  </div>
                </el-card>
                <el-card class="carouselCard" style="height: 248px;width: 240px;padding: 10px" shadow="hover">
                  <div class="item text">
                    <img style="border-radius: 10px" width="232px" height="146px" :src="item[2]" alt=""/>
                    <!--                  文字-->
                    <div style="font-size: 20px;padding: 5px">
                      <em><b>正版特惠</b></em> Adobe2021全家桶...
                    </div>
                    <!--                  收藏评价-->
                    <div
                      style="font-size: 12px;line-height:12px;text-align:center;display: flex;justify-content: space-between;">
                      <p> 2020年12月10日</p>
                      <span style="display: flex;justify-content: space-around;align-items: center;">
                      <span style="padding-right: 5px"><img height="12px" src="../../assets/icon/眼睛.png"
                                                            alt="">81.5k </span>
                      <span><img height="12px" src="../../assets/icon/评论.png" alt="">48</span>
                    </span>
                    </div>
                  </div>
                </el-card>
                <el-card class="carouselCard" style="height: 248px;width: 240px;padding: 10px" shadow="hover">
                  <div class="item text">
                    <img style="border-radius: 10px" width="232px" height="146px" :src="item[3]" alt=""/>
                    <!--                  文字-->
                    <div style="font-size: 20px;padding: 5px">
                      <em><b>正版特惠</b></em> Adobe2021全家桶...
                    </div>
                    <!--                  收藏评价-->
                    <div
                      style="font-size: 12px;line-height:12px;text-align:center;display: flex;justify-content: space-between;">
                      <p> 2020年12月10日</p>
                      <span style="display: flex;justify-content: space-around;align-items: center;">
                      <span style="padding-right: 5px"><img height="12px" src="../../assets/icon/眼睛.png"
                                                            alt="">81.5k </span>
                      <span><img height="12px" src="../../assets/icon/评论.png" alt="">48</span>
                    </span>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-card>

        <!--        资源投递-->
        <router-link to="/submitRes">
          <div id="submitRes"></div>
        </router-link>
        <!--        专题栏目-->
        <div id="topicRes">
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>专题栏目</span>
            </div>
            <div class="text item topicResMain">
              <router-link :to="{
                name:'topic',
                params:{
                  cat:'ghlr'
                }
              }">
                <el-card class="box-card" style="background-image: url('https://www.giaott.com/images/2022/10/07/jqPKW.png')">
                  <div class="text item">
                    <div style="text-decoration: none;color: white;letter-spacing:5px;padding-left:20px;font-size: 27px ">
                      修改软件
                    </div>
                  </div>
                </el-card>
              </router-link>
              <router-link :to="{
                name:'topic',
                params:{
                  cat:'jqsoft'
                }
              }">
                <el-card class="box-card" style="background-image: url('https://www.giaott.com/images/2022/10/07/jqUQ4.jpg')">
                  <div class="text item">
                    <div style="text-decoration: none;color: white;letter-spacing:5px;padding-left:20px;font-size: 27px ">
                      惊奇软件
                    </div>
                  </div>
                </el-card>
              </router-link>
              <router-link :to="{
                name:'topic',
                params:{
                  cat:'softlist'
                }
              }">
                <el-card class="box-card" style="background-image: url('https://www.giaott.com/images/2022/10/07/jqZY9.jpg')">
                  <div class="text item">
                    <div style="text-decoration: none;color: white;letter-spacing:5px;padding-left:20px;font-size: 27px ">
                      软件合集
                    </div>
                  </div>
                </el-card>
              </router-link>
              <router-link :to="{
                name:'topic',
                params:{
                  cat:'help'
                }
              }">
                <el-card class="box-card" style="background-image: url('https://www.giaott.com/images/2022/10/07/jqfIG.png')">
                  <div class="text item">
                    <div style="text-decoration: none;color: white;letter-spacing:5px;padding-left:20px;font-size: 27px ">
                      帮助文档
                    </div>
                  </div>
                </el-card>
              </router-link>
              <router-link :to="{
                name:'topic',
                params:{
                  cat:'ossoft'
                }
              }">
                <el-card class="box-card" style="background-image: url('https://www.giaott.com/images/2022/10/07/jqHAu.jpg')">
                  <div class="text item">
                    <div style="text-decoration: none;color: white;letter-spacing:5px;padding-left:20px;font-size: 27px ">
                      开源软件
                    </div>
                  </div>
                </el-card>
              </router-link>
            </div>
          </el-card>
        </div>
        <!--        分类标签-->
        <el-tabs
          @tab-click="selectTab"
          key="分类标签" v-model="activeName" type="border-card">
          <el-tab-pane key="最新文章" style="font-size: 25px" label="最新文章" name="最新文章"/>

          <el-tab-pane key="电脑软件" label="电脑软件" name="电脑软件"/>

          <el-tab-pane key="安卓软件" label="安卓软件" name="安卓软件"/>
          <el-tab-pane list-shadow="never"
                       key="补丁机"
                       :show-head="false"
                       label="补丁/注册机"
                       name="补丁"/>
          <el-tab-pane key="系统" :show-head="false" label="系统" name="系统"/>
          <div>
            <router-view/>
          </div>
        </el-tabs>
      </div>
      <div style="width:26%">
        <MainContentAside/>
      </div>
    </div>
  </div>
</template>

<script>
import BaseCarousel from '@//components/base/BaseCarousel.vue'
import MainContentAside from "@//components/index/MainContentAside";
import ListContent from "@//components/list/ListContent";

export default {
  name: "MainContent",
  data() {

    return {
      titleCarousel: [
        'https://www.giaott.com/images/2022/09/28/jIdJN.jpg',
        'https://www.giaott.com/images/2022/09/28/jIOqf.png',
        'https://www.giaott.com/images/2022/09/28/jIA40.png',
        'https://www.giaott.com/images/2022/09/28/jI77w.jpg',
      ],
      carousel:[
        [
          'https://www.giaott.com/images/2022/10/07/jqTep.png',
          'https://www.giaott.com/images/2022/10/07/jqRa5.png',
          'https://www.giaott.com/images/2022/10/07/jqMic.png',
          'https://www.giaott.com/images/2022/10/07/jqwQQ.png',
        ],
        [
          'https://www.giaott.com/images/2022/10/07/jq5OR.png',
          'https://www.giaott.com/images/2022/10/07/jqEwd.png',
          'https://www.giaott.com/images/2022/10/07/jqIR1.png',
          'https://www.giaott.com/images/2022/10/07/jq0Ws.png',
        ],
        [
          'https://www.giaott.com/images/2022/10/07/jqqUY.png',
          'https://www.giaott.com/images/2022/10/07/jq8CP.png',
          'https://www.giaott.com/images/2022/10/07/jqXaS.webp',
          'https://www.giaott.com/images/2022/10/07/jqsw0.webp',
        ], [
          'https://www.giaott.com/images/2022/10/07/jqF3f.webp',
          'https://www.giaott.com/images/2022/10/07/jqQRw.png',
          'https://www.giaott.com/images/2022/10/07/jqDON.png',
          'https://www.giaott.com/images/2022/10/07/jqbb7.png',
        ]
      ],
      activeName: '最新文章',
      firstCarousel: {
        height: '500px',
        width: '100%'
      },
      secondCarousel: {
        width: "100%",
        height: "343px"
      }
    }
  },
  components: {ListContent, BaseCarousel, MainContentAside},
  methods: {
    selectTab({name}) {
      let cat;
      switch (name) {
        case '最新文章':
          cat = 'all';
          break;
        case '电脑软件':
          cat = 'netre';
          break;
        case '安卓软件':
          cat = 'zip';
          break
        case '补丁':
          cat = 'code';
          break;
        case '系统':
          cat = 'win10';
          break;
        default:
          cat = 'all'
      }
      this.$router.push({
        name: 'indexCategory',
        params: {
          cat
        }
      })
    }
  },
  mounted(){
    this.$router.push({
      name: 'indexCategory',
      params: {
        cat:'all'
      }
    })
  }
}

</script>

<style scoped>
.carouselCard:hover {
  transform: translateY(-9px);
}
.carouselCard{
  margin: 5px 10px;
}

/*.el-card {*/
/*  background-color: ;*/
/*}*/

/deep/ .el-tabs__item {
  font-size: 18px !important;
}

/deep/ .el-card__body {
  padding: 0;
}

.topicResMain {
  display: flex;
  justify-content: space-around;
}

.box-card {
  width: 171px;
  height: 153px;
  line-height: 153px;
  margin: 5px 15px;
  background-size: cover;
  border-radius: 10px;
}
.box-card:hover{
  transform: translateY(-9px);
}

#mainContent {
  margin: 20px 210px;
}

#mainMain {
  position: relative;
}

#submitRes {
  margin-top: 20px;
  width: 100%;
  height: 250px;

  background-image: url("https://www.giaott.com/images/2022/09/28/jIVni.webp");
  background-size: contain;

}

#topicRes {
  margin-top: 20px;
  width: 100%;
  height: 247px;
  /*background-color: #d3dce6;*/
}


.el-tabs {
  margin-top: 20px;
}

</style>
